<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>vue</title>
        <!-- 引入vue文件-->
		<!--<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>-->
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<!--引入路由-->
		<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="vue">
			<ul>
				<router-link to="/home">主页</router-link>
				<br />
    			<router-link to="/news">新闻</router-link>
			</ul>
			
			<div>
				<!--最顶层的出口，渲染最高级路由匹配到的组件-->
				<router-view></router-view>
			</div>
		</div>
	</body>
	<script type="application/javascript">
		/*一个被渲染组件同样可以包含自己的嵌套 <router-view>*/
		var Home=Vue.extend({
			template:' <div class="home">\
			                  哈哈\
			                  <br />\
			                  <router-link to="/home/one">子主页一</router-link>\
				<br />\
    			<router-link to="/home/two">子主页二</router-link>\
		      				<router-view></router-view>\
    					</div>'
		});
		var News=Vue.extend({
			template:'<h3>我是新闻</h3>'
		});
		var HomeOne=Vue.extend({
			template:'<h3>我是主页一</h3>'
		});
		var HomeTwo=Vue.extend({
			template:'<h3>我是主页二</h3>'
		});
		// 3. 创建 router 实例，然后传 `routes` 配置,你还可以传别的配置参数
		var router = new VueRouter({
		    routes: [
		    /*要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置*/
				  { path: '/home', component: Home,
				    children: [
				        /*当你访问 /home根路径时，出口那不会渲染任何东西，这是因为没有匹配到合适的子路由。
				         * 如果你想要渲染点什么，可以提供一个 空的 子路由：如下*/
				        {
				          // 当 /home/one 匹配成功，
				          // UserProfile 会被渲染在 User 的 <router-view> 中
				          path: 'one',
				          component: HomeOne
				        },
				        {
				          // 当 /home/two 匹配成功
				          // UserPosts 会被渲染在 User 的 <router-view> 中
				          path: 'two',
				          component: HomeTwo
				        }
				     ]
				  },
				  { path: '/news', component: News }
			]
		})
		// 4. 创建和挂载根实例,通过 router 配置参数注入路由，从而让整个应用都有路由功能
		var app = new Vue({
		  router:router
		}).$mount('#vue')
		// 现在，应用已经启动了！
	</script>
</html>
